<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta http-equiv="Cache-Control" content="no-siteapp">
		<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
		<meta name="apple-mobile-web-app-title" content="墨藏老酒">
		<link rel="stylesheet" href="css/mui.css">
		<link rel="stylesheet" href="css/team.css">
		<link rel="stylesheet" href="font_1164560_51nk3uh81z5/iconfont.css">
		<script src="js/jquery-1.9.1.js"></script>
		<title>我的团队</title>
		<style>
			.mui-bar-nav {
				background: #fff;
				box-shadow: none;
			}

			.mui-bar-nav a {
				color: #333;
			}

			.mui-bar-nav h1 {
				color: #333;
				text-align: center;
			}

			.mui-title {
				font-size: 15px;
			}

			.content {
				margin-top: 44px;
			}

			body {
				background: #fff;
			}

			.mui-slider .mui-slider-group .mui-slider-item {
				height: auto;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的团队</h1>
		</header>
		<div class='content'>
			<div class="tab">
				<div class="tab-menu">
					<ul>
						<li class="active"><span>普通会员</span></li>
						<li><span>VIP</span></li>
						<li><span>社区经销商</span></li>
						<li><span>区域代理</span></li>
						<li><span>总代理</span></li>
					</ul>
				</div>
				<div class="tab-box">
					<div class="team_list">
						<table>
							<tr class="team_title">
								<th>头像</th>
								<th>编号</th>
								<th>姓名</th>
								<th>用户级别</th>
								<th>手机号</th>
								<th>注册时间</th>
							</tr>
							<tr class="team_detail">
								<td><img src="img/head.png" alt=""></td>
								<td>NO001</td>
								<td>夏天</td>
								<td>区域经理</td>
								<td>15537372370</td>
								<td>2019.06.02</td>
							</tr>
							<tr class="team_detail">
								<td><img src="img/head.png" alt=""></td>
								<td>NO001</td>
								<td>夏天</td>
								<td>区域经理</td>
								<td>15537372370</td>
								<td>2019.06.02</td>
							</tr>
							<tr class="team_detail">
								<td><img src="img/head.png" alt=""></td>
								<td>NO001</td>
								<td>夏天</td>
								<td>区域经理</td>
								<td>15537372370</td>
								<td>2019.06.02</td>
							</tr>
						</table>
					</div>
					<div>456</div>
					<div>789</div>
					<div>1</div>
					<div>2</div>
				</div>
			</div>
		</div>
		<script>
			$().ready(function() {
				$(".tab-menu li").mouseover(function() {
					//通过 .index()方法获取元素下标，从0开始，赋值给某个变量
					var _index = $(this).index();
					//让内容框的第 _index 个显示出来，其他的被隐藏
					$(".tab-box>div").eq(_index).show().siblings().hide();
					//改变选中时候的选项框的样式，移除其他几个选项的样式
					$(this).addClass("active").siblings().removeClass("active");
				});
			});
		</script>
	</body>
</html>
